<template>
	<view class="lifecycle-component">
		<view class="component-header">
			<text class="component-title">组件生命周期演示</text>
		</view>
		
		<view class="lifecycle-stages">
			<!-- 组件数据展示 -->
			<view class="data-section">
				<text class="section-label">组件数据:</text>
				<text class="data-value">{{message}}</text>
			</view>
			
			<!-- 生命周期状态指示器 -->
			<view class="status-indicators">
				<view v-for="(status, key) in lifecycleStatus" :key="key" class="status-item">
					<text class="status-name">{{key}}:</text>
					<view :class="['status-dot', status ? 'active' : '']"></view>
				</view>
			</view>
			
			<!-- 组件交互按钮 -->
			<view class="component-actions">
				<button size="mini" @tap="updateComponentData">更新数据</button>
				<button size="mini" type="primary" @tap="forceUpdate">强制更新</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		// 组件名称
		name: 'LifecycleComponent',
		
		// 组件属性
		props: {
			// 可以从父组件接收的属性
			initialMessage: {
				type: String,
				default: '组件初始化消息'
			}
		},
		
		// 组件数据
		data() {
			return {
				// 组件内部数据
				message: this.initialMessage,
				updateCount: 0,
				// 生命周期状态跟踪
				lifecycleStatus: {
					created: false,
					mounted: false,
					updated: false,
					destroyed: false,
					activated: false,
					dectivated: false
				}
			};
		},
		
		// 计算属性
		computed: {
			// 计算组件状态描述
			componentState() {
				if (this.lifecycleStatus.destroyed) {
					return '已销毁';
				} else if (this.lifecycleStatus.mounted) {
					return '已挂载';
				} else if (this.lifecycleStatus.created) {
					return '已创建';
				} else {
					return '未创建';
				}
			}
		},
		
		// 监听器
	watch: {
			// 监听外部属性变化
			initialMessage: {
				handler(newVal, oldVal) {
					this.log('🔄 外部属性变化: ' + oldVal + ' -> ' + newVal);
					this.message = newVal;
				},
				immediate: true
			}
		},
		
		// Vue 2 生命周期函数 (也兼容 Vue 3)
		
		// 实例创建完成后被立即调用
		created() {
			this.lifecycleStatus.created = true;
			this.log('🐣 组件创建 (created) - 实例已创建，数据观测、计算属性已设置');
			// 可以在这里进行数据初始化，但不能访问DOM
			this.initializeData();
		},
		
		// 实例挂载完成后调用
		mounted() {
			this.lifecycleStatus.mounted = true;
			this.log('🚀 组件挂载 (mounted) - 模板已渲染，可访问DOM元素');
			// 可以在这里进行DOM操作、发送网络请求等
			this.performMountedActions();
		},
		
		// 数据更新时调用，发生在虚拟DOM打补丁之前
		beforeUpdate() {
			this.log('🔄 组件更新前 (beforeUpdate) - 数据已更新，DOM尚未更新');
			// 可以在这里访问更新前的DOM状态
		},
		
		// 数据更新后调用
		updated() {
			this.lifecycleStatus.updated = true;
			this.updateCount++;
			this.log('✅ 组件更新后 (updated) - DOM已更新，第' + this.updateCount + '次更新');
			// 可以在这里执行依赖于DOM的操作，但要避免在此处修改数据
		},
		
		// 组件销毁前调用
		beforeDestroy() {
			this.log('🗑️ 组件销毁前 (beforeDestroy) - 实例仍然完全可用');
			// 可以在这里清除定时器、取消事件监听等清理工作
			this.cleanupResources();
		},
		
		// 组件销毁后调用
	destroyed() {
			this.lifecycleStatus.destroyed = true;
			this.log('💀 组件销毁 (destroyed) - 实例已销毁，所有事件监听器已移除');
		},
		
		// 被 keep-alive 缓存的组件激活时调用
		activated() {
			this.lifecycleStatus.activated = true;
			this.log('🔋 组件激活 (activated) - 从缓存中激活');
		},
		
		// 被 keep-alive 缓存的组件停用时调用
		dectivated() {
			this.lifecycleStatus.dectivated = true;
			this.log('🔌 组件停用 (dectivated) - 被缓存');
		},
		
		// Vue 3 特有生命周期函数 (也兼容 Vue 2)
		
		// 组件实例初始化时调用
		beforeCreate() {
			this.log('👶 组件初始化前 (beforeCreate) - 数据观测和事件配置之前');
		},
		
		// 组件卸载前调用 (Vue 3中的beforeUnmount)
		beforeUnmount() {
			this.log('🛑 组件卸载前 (beforeUnmount) - 卸载DOM节点之前');
			this.cleanupResources();
		},
		
		// 组件卸载后调用 (Vue 3中的unmounted)
		unmounted() {
			this.lifecycleStatus.destroyed = true;
			this.log('🗑️ 组件卸载后 (unmounted) - 组件已完全卸载');
		},
		
		// 组件方法
		methods: {
			// 记录日志并发送到父组件
			log(content) {
				console.log('📦 组件:', content);
				// 发送事件到父组件
				this.$emit('componentLog', content);
			},
			
			// 初始化数据
			initializeData() {
				// 模拟异步数据加载
				setTimeout(() => {
					this.log('📊 组件数据初始化完成');
				}, 500);
			},
			
			// 挂载后执行的操作
			performMountedActions() {
				// 模拟DOM操作或API调用
				this.log('🔧 执行挂载后的操作');
			},
			
			// 清理资源
			cleanupResources() {
				// 清除定时器、取消事件监听等
				this.log('🧹 清理组件资源');
			},
			
			// 更新组件数据
			updateComponentData() {
				this.log('✏️ 开始更新组件数据');
				this.message = '组件数据已更新 - ' + new Date().toLocaleTimeString();
			},
			
			// 强制更新组件
			forceUpdate() {
				this.log('🔄 强制更新组件');
				// 调用Vue实例的$forceUpdate方法
				this.$forceUpdate();
			}
		}
	};
</script>

<style scoped>
	.lifecycle-component {
		background: #f8f8f8;
		border: 1rpx solid #e0e0e0;
		border-radius: 10rpx;
		padding: 20rpx;
		margin: 10rpx 0;
	}
	
	.component-header {
		margin-bottom: 20rpx;
	}
	
	.component-title {
		font-size: 30rpx;
		font-weight: bold;
		color: #333;
	}
	
	.lifecycle-stages {
		/* 生命周期阶段容器 */
	}
	
	.data-section {
		margin-bottom: 20rpx;
		padding: 15rpx;
		background: #fff;
		border-radius: 8rpx;
	}
	
	.section-label {
		font-size: 28rpx;
		color: #666;
		margin-right: 10rpx;
	}
	
	.data-value {
		font-size: 28rpx;
		color: #333;
		word-break: break-all;
	}
	
	.status-indicators {
		display: flex;
		flex-wrap: wrap;
		gap: 15rpx;
		margin-bottom: 20rpx;
	}
	
	.status-item {
		display: flex;
		align-items: center;
		background: #fff;
		padding: 8rpx 15rpx;
		border-radius: 20rpx;
	}
	
	.status-name {
		font-size: 24rpx;
		color: #666;
		margin-right: 10rpx;
	}
	
	.status-dot {
		height: 16rpx;
		width: 16rpx;
		border-radius: 50%;
		background: #ccc;
	}
	
	.status-dot.active {
		background: #07c160;
	}
	
	.component-actions {
		display: flex;
		gap: 10rpx;
	}
</style>